<div class="container">
    <form id="login-form-id" method="post" class="form-horizontal">
        <input type="hidden" name="<?=$this->security->getTokenKey()?>" value="<?=$this->security->getToken()?>">
        <div class="form-group">
            <label for="username-id" class="col-sm-2 control-label"></label>
            <div class="col-sm-3">
                <p class="text-danger"><?=$error;?></p>
            </div>
        </div>
        <div class="form-group">
            <label for="username-id" class="col-sm-2 control-label">UserName</label>
            <div class="col-sm-3">
                <input required type="text" value="<?=$username?>" class="form-control" id="username-id" name="username" placeholder="please input your username">
            </div>
        </div>
        <div class="form-group">
            <label for="password-id" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-3">
                <input type="password" class="form-control" id="password-id" name="password" required placeholder="input your password">
            </div>
        </div>
        <input type="hidden" name="failCount" value="<?=$failCount?>">
        <?php if($failCount>2) {?>
        <div class="form-group">
            <label for="captcha-id" class="col-sm-2 control-label">Captcha</label>
            <div class="col-sm-3">
                <input type="text" name="captcha" class="form-control" id="captcha-id" required placeholder="input captcha">
                <img style="margin-top: 5px;" src="/site/captcha" id="captcha-img-id">
            </div>
        </div>
        <?php }?>
        <div class="form-group">
            <label for="button-id" class="col-sm-2 control-label"></label>
            <div class="col-sm-3">
                <button id="button-id" class="btn btn-success btn-block" type="submit">Login</button>
            </div>
        </div>
    </form>
</div>

<script>
    var captchaImg = $('#captcha-img-id');
    captchaImg.click(function () {
        captchaImg.attr('src', '/site/captcha?'+Math.random());
    });
</script>